<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Windows 12</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="./bios_phone.css">
    <script>
        function addZero(i) {
            return i < 10 ? ('0' + i) : i
        }
        function timeChange() {
            d = new Date()
            document.getElementById('time').innerHTML = "[" + addZero(d.getHours()) + ":" + addZero(d.getMinutes()) + ":" + addZero(d.getSeconds()) + "]";
            document.getElementById('date').innerHTML = "[" + d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear() + "]";

            //顺便适应高度
            document.getElementById('body').style.height = window.innerHeight + "px";
            document.getElementById('mainPage').style.height = (window.innerHeight - 150) + 'px';
            document.getElementById('exitPage').style.height = (window.innerHeight - 150) + 'px';
        }
        function toBoot(){
            document.getElementById('background').style.display='';
            setTimeout('document.getElementById(`body`).innerHTML=``;document.getElementById(`body`).style.cssText=`background-color: black;`;',500);setTimeout('window.location.href=`./boot.html`',1000); //Boot延迟
        }
        function BIOS_confirm(tit,okcode,width){
            document.getElementById('confirm-tit').innerHTML = tit;
            document.getElementById('exit_confirm').style.display='';
            document.getElementById('background').style.display='';
            document.getElementById('confirm').style.width=(window.innerWidth*width/100)+"px";
            document.getElementById('ok-btn').addEventListener('click', function(){document.getElementById('background').style.display='none';eval(okcode);});
        }
        setTimeout("timeChange();setInterval(timeChange,1000)", 1000 - (new Date()).getMilliseconds());//精确时间
    </script>
</head>

<body id="body" scroll="no">
    <div id="exit_confirm" style="display:none;background-color: white;padding-top: 20px;padding-bottom: 20px;padding-left: 10px;padding-right: 10px;position: absolute;left:35%;top:42.5%;/**/box-shadow: 8px 16px 0px 0px #000;/**/cursor: default;/**/z-index:1919810;">
        <div id="confirm" style="background-color: white; color:black;border:3.5px solid #000; padding: 5px;display: flex;flex-direction: column;">
            <p style="text-align: center;margin-top: 15px;flex: 35;flex: 25;" id="confirm-tit"> Save configuration changes and exit now? </p>
            <div style="flex: 1;"></div>
            <div style="display: flex;align-items: center;justify-content: center;flex: 25;">
                <a class="confirm-button" id="ok-btn">[OK]</a>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                <a class="confirm-button" onclick="document.getElementById('exit_confirm').style.display = 'none';document.getElementById('background').style.display = 'none';">[Cancel]</a>
            </div>
        </div>
    </div>
    <div style="position: absolute;background-color: rgba(11,45,14,0);top:0;left:0;width:100%;height:100%;display: none;z-index:114514;" id="background"></div>

    <head>
        <nav>
            <p class="tit">BIOS Setup Utility</p>
        </nav>
        <nav class="pages" style="padding-left: 15px;">
            <a class="page" id="main" onclick="tab=0;ChangePage()">Main</a>
            <a class="page" id="exit" onclick="tab=1;ChangePage()">Exit</a>
        </nav>
    </head>
    <div id="mainPage">
        <table class="option" style="cursor: default;">
            <tr>
                <td>
                    System Time:
                </td>
                <td style="width:10px;"></td>
                <td id="time">
                    [11:45:14]
                </td>
            </tr>
            <tr style="height:10px;"></tr>
            <tr>
                <td>
                    System Date:
                </td>
                <td style="width:10px;"></td>
                <td id="date">
                    [10/08/1919]
                </td><!--注意：这里的日期为[日/月/年]-->
            </tr>
        </table>
    </div>
    <div id="exitPage">
        <a onclick="BIOS_confirm(' Save configuration changes and exit now? ','toBoot()',30)" class="exit">Exit Saving Changes</a>
        <br/>
        <div style="height:10px;width: 10px;"></div><!--占位控件-->
        <a onclick="BIOS_confirm(' Discard changes and exit setup? ','toBoot()',25);" class="exit">Exit Discarding Changes</a>
        <br/>
        <div style="height:10px;width: 10px;"></div><!--占位控件-->
        <a onclick="BIOS_confirm('  Restore default setup?  ','document.getElementById(`exit_confirm`).style.display = `none`;document.getElementById(`background`).style.display = `none`;',18);" class="exit">Restore Defaults</a>
    </div>
    <script>
        var here;
        var tab=0;
        timeChange();
        function ChangePage(){
            if (!tab) {
                document.getElementById('exitPage').style.display = 'none';
                document.getElementById('mainPage').style.display = '';
                document.getElementById('exit').style.cssText = 'background-color: #0100a2;color: #aaaaaa;';
                document.getElementById('main').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                here = 'main';
                tab = 0;
            } else {
                document.getElementById('mainPage').style.display = 'none';
                document.getElementById('exitPage').style.display = '';
                document.getElementById('main').style.cssText = 'background-color: #0100a2;color: #aaaaaa;';
                document.getElementById('exit').style.cssText = 'color: #ffffff;background-color: #aaaaaa;';
                here = 'exit';
                tab = 1;
            }
        }
        ChangePage();
        h = window.innerHeight * 0.15;
        w = window.innerWidth * 0.3;
        document.getElementById('confirm').style.height = h + "px";
        document.getElementById('confirm').style.width = w + "px";
        document.oncontextmenu = function(){
            return false;
        }
    </script>
</body>

</html>